<!--
 * @Author: Shususumu
 * @Date: 2020-10-19 09:31:38
 * @LastEditTime: 2020-10-20 19:19:58
 * @FilePath: \campusPTjobs\src\views\order\table.vue
-->
<template>
  <div>
    <el-table :data="orderList" stripe style="width: 100%">
      <el-table-column fixed prop="id" label="订单编号"> </el-table-column>
      <el-table-column fixed prop="orderTime" label="下单时间">
      </el-table-column>
      <el-table-column prop="total" label="总价"> </el-table-column>
      <el-table-column prop="status" label="状态"> </el-table-column>
      <el-table-column prop="customerId" label="顾客ID"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="details(scope.row)" type="text" size="small">{{
            detail
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[6, 8, 10, 12]"
      :page-size="6"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 模态框 -->
    <el-dialog title="选择派单的员工" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-radio-group v-model="radio">
          <el-radio
            v-for="item in waiters"
            :key="item.id"
            :label="item.id"
            border
            >{{ item.username }}</el-radio
          >
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="(dialogVisible = false), sendOrder()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import qs from "querystring";
export default {
  data() {
    return {
      orders: [],
      waiters: [],
      currentPage: 1,
      total: 1,
      pageSize: 6,
      detail: "详情",
      dialogVisible: false,
      radio: 3,
    };
  },
  computed: {
    orderList() {
      this.orders.forEach((item) => {
        item.orderTime = new Date(item.orderTime).toLocaleString();
      });
      return this.orders;
    },
  },
  methods: {
    //员工查询
    findwaiter() {
      this.$axios.get("/waiter/findAll").then((res) => {
        res.data.data.filter((item) => {
          item.status == "启用";
        });
        this.waiters = res.data.data;
      });
    },
    //详情/派单功能
    details(msg) {
      if (this.detail == "派单") {
        this.dialogVisible = true;
        this.findwaiter();
      } else {
        this.$router.push({
          path: "/order_details/index",
          query: { msg: msg },
        });
      }
    },
    //派单
    sendOrder() {
      this.$axios.get("/order/sendOrder").then((res) => {
        if (res.data.status == 200) {
          //保存成功
          //1.关闭模态框

          //2.刷新页面
          self.findquery();
          //3.提示用户保存成功-弹框
          this.$message({
            message: "派单成功",
            type: "success",
          });
        } else {
          //保存失败
          this.$message.error("派单失败", res.data.message);
        }
      });
    },
    sendItem(name) {
      //   alert(name);->status
      var obj = {
        page: this.currentPage - 1,
        pageSize: this.pageSize,
      };
      if (name != "所有订单") {
        obj.status = name;
      }
      obj = qs.stringify(obj);
      this.$axios.post("/order/queryPage", obj).then((res) => {
        this.orders = res.data.data.list;
        this.total = res.data.data.total;
      });
      if (name == "待派单") {
        this.detail = "派单";
      }
    },
    //分页功能
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findquery();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.findquery();
    },
  },
};
</script>
